<template>
  <div class="tag-manager">
    <div class="tag-header">
      <h3>标签管理</h3>
      <el-button @click="showAddDialog = true" type="primary" size="small">
        <el-icon><Plus /></el-icon>
        添加标签
      </el-button>
    </div>

    <div class="tag-list">
      <div
        v-for="tag in tags"
        :key="tag"
        class="tag-item"
      >
        <el-tag
          :type="selectedTags.includes(tag) ? 'primary' : 'info'"
          closable
          @close="removeTag(tag)"
          @click="toggleTag(tag)"
          style="cursor: pointer;"
        >
          {{ tag }}
          <span class="tag-count">({{ getTagCount(tag) }})</span>
        </el-tag>
      </div>
    </div>

    <!-- 添加标签对话框 -->
    <el-dialog
      v-model="showAddDialog"
      title="添加标签"
      width="400px"
    >
      <el-form @submit.prevent="addTag">
        <el-form-item label="标签名称">
          <el-input
            v-model="newTagName"
            placeholder="请输入标签名称"
            @keyup.enter="addTag"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button @click="addTag" type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useNotesStore } from '@/stores/notes'

interface Props {
  modelValue?: string[]
}

interface Emits {
  (e: 'update:modelValue', value: string[]): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const notesStore = useNotesStore()

const showAddDialog = ref(false)
const newTagName = ref('')

const tags = computed(() => notesStore.tags)
const selectedTags = computed({
  get: () => props.modelValue || [],
  set: (value) => emit('update:modelValue', value)
})

const getTagCount = (tag: string) => {
  return notesStore.notes.filter(note => 
    note.tags?.includes(tag)
  ).length
}

const toggleTag = (tag: string) => {
  let newSelected = [...selectedTags.value]
  const index = newSelected.indexOf(tag)
  
  if (index > -1) {
    newSelected.splice(index, 1)
  } else {
    newSelected = [...newSelected, tag]
  }
  
  selectedTags.value = newSelected
}

const addTag = async () => {
  const tagName = newTagName.value.trim()
  
  if (!tagName) {
    ElMessage.warning('请输入标签名称')
    return
  }
  
  if (tags.value.includes(tagName)) {
    ElMessage.warning('标签已存在')
    return
  }
  
  // 这里可以添加创建标签的逻辑
  // 目前只是显示成功消息
  ElMessage.success('标签添加成功')
  newTagName.value = ''
  showAddDialog.value = false
}

const removeTag = async (tag: string) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除标签"${tag}"吗？这将从所有使用该标签的笔记中移除该标签。`,
      '删除标签确认',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 这里可以添加删除标签的逻辑
    // 需要更新所有使用该标签的笔记
    ElMessage.success('标签删除成功')
  } catch (error) {
    // 用户取消删除
  }
}
</script>

<style scoped>
.tag-manager {
  padding: 16px;
}

.tag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tag-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  display: inline-block;
}

.tag-count {
  font-size: 12px;
  opacity: 0.7;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .tag-manager {
    padding: 12px;
  }
  
  .tag-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .tag-header .el-button {
    width: 100%;
  }
}
</style> 